<template>
  <div class="chat">
    <div class="headerBox">
      <PublicHead></PublicHead>
      <SelectTab :default-id="activeTab" @changeTab="changeTab" :tabList="tabList" v-if="tabList.length"></SelectTab>
    </div>

    <div class="container">
      <Account v-if="activeTab === 1"></Account>
      <Dialogue v-if="activeTab === 2"></Dialogue>
      <Visitor v-if="activeTab === 3"></Visitor>
      <Customer v-if="activeTab === 4"></Customer>
      <DataModule v-if="activeTab === 5"></DataModule>
      <SetModule v-if="activeTab === 6"></SetModule>
      <Payment v-if="activeTab === 7"></Payment>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, watch, computed} from 'vue'
import { useStore } from "vuex"
import { Howl } from 'howler'
import PublicHead from "@/components/public-head/index.vue"
import SelectTab from "@/components/selectTab/index.vue"
import Dialogue from "../dialogue/index.vue"
import Account from "../account/index"
import Visitor from "../visitor/index"
import Customer from "../customer/index"
import DataModule from "../dataModule/index"
import SetModule from "../setModule/index"
import Payment from "../payment/index"

const activeTab = ref(2)
const tabList = ref([
  {id: 1, name:"账户"},
  {id: 2, name:"对话", num: 0},
  {id: 3, name:"客户"},
  {id: 4, name:"客资"},
  {id: 5, name:"数据"},
  {id: 6, name:"设置"},
  {id: 7, name:"账户付款"},
])
const changeTab = (e) => {
  activeTab.value = e
}

const store = useStore()
const friend = computed(() => (store.state.conversation.active))
const response = computed(() => {
  if(store.state.websocket.response == "pong"){
    return store.state.websocket.response
  }
  return JSON.parse(store.state.websocket.response)
})
const countAll = computed(() => store.state.conversation.countAllRead)
watch(countAll, () => {
  tabList.value.forEach(el => {
    if(el.id === 2) {
      el.num = countAll.value
    }
  })
})
watch(() => response, async(newVal, _oldVal) => {
  if(newVal.value) {
    let title = ""
    let tips = ""
    let responseBody = newVal.value.responseBody || {}
    //from 谁发送的  to谁收到的
    switch (newVal.value.type) {
      case 0:
        break;
      case 1:
        // console.log(friend.value, "friend.value")
        if(friend.value && friend.value.id === responseBody.from) {
          // 添加信息
          store.dispatch("message/pushPrivateMessage", responseBody)
          store.dispatch('message/updateScrollBottom')
          // 设置消息已读
          await store.dispatch("message/updatePrivateMessageStatus", [responseBody.id])
          if(activeTab.value !== 2) {
            store.dispatch("message/notificationMessage", responseBody)
          }
        }else{
          // 不在当前会话，直接提示信息
          store.dispatch("message/notificationMessage", responseBody)
        }
        // 更新会话列表
        store.dispatch("conversation/updateConversationPrivateMessage", responseBody)
        playMusic()
        break;
      case 2:
        if(friend.value && friend.value.id  === responseBody.to) {
          store.dispatch("message/updatePrivateMessage", responseBody)
        }
        store.dispatch("conversation/updateConversationPrivateMessage", responseBody)
        break
    }
  }
}, {deep: true})

const urls = [
  require('@/assets/mp3/dingdong.mp3')
]
const playMusic= () => {
  let sound = new Howl({
    src: [urls[0]]
  })
  sound.play()
  store.dispatch("message/newNotice")
}
</script>

<style scoped lang="scss">
.container {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  padding: 0 20px;
  min-width: 850px;
}
.container {
  margin-top: 20px;
  height: calc(100vh - 140px);
  width: 100vw;
  overflow: hidden;
}
//.headerBox {
//  background: #fff;
//  position: sticky;
//  z-index: 10;
//  top: 0;
//}
</style>